<template>
  <div class="charts_container">
    <p>价格区间</p>
    <div id="myChart" :style="{width: '885px', height: '550px'}"></div>
  </div>
  <div class="footer">
    <div class="box">
      <div class="line">
        <div class="circ">
        </div>
      </div>
      <p>楼盘均价</p>
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
import { onMounted } from 'vue'

export default {
  setup () {
    onMounted(() => { // 需要获取到element,所以是onMounted的Hook
      const myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        lineStyle: { color: '#35B8AE' },
        title: {
          text: '广州楼盘近半年均价走势',
          left: 333,
          textStyle: {
            // 'font-family': 'HarmonyOS Sans SC',
            // 'font-style': normal,
            'font-weight': 700,
            'font-size': 24
          }
        },
        xAxis: {
          data: ['2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07']
        },
        yAxis: {
          axisLabel: {
            formatter: function (v) {
              return v / 1000 + 'k' // 给纵坐标的值统一除以10000 就变成了以万为单位
            }
          },
          min: 17500,
          splitNumber: 8,
          scale: true, // 自适应
          minInterval: 2500 // 分割刻度
        },
        series: [
          {
            symbol: 'circle',
            symbolSize: 8,
            name: '用户量',
            type: 'line',
            data: [19628, 19628, 19628, 19628, 31621, 31621],
            itemStyle: {
              normal: {
                label: { show: true },
                color: '#35B8AE',
                lineStyle: {
                  color: '#35B8AE'
                }
              }
            }
          }
        ],
        grid: { // 让图表占满容器
          left: '50px',
          right: '0px',
          bottom: '30px'
        }
      })
      window.onresize = function () { // 自适应大小
        myChart.resize()
      }
    })
  }
}
</script>

<style lang='less' scoped>
.charts_container {
  display: flex;
  align-items: center;
  width: '930px';
  p {
    font-family: 'HarmonyOS Sans SC';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #4d759e;
    transform: rotate(270deg);
  }
}
.footer {
  display: flex;
  .box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 8px;
    width: 106px;
    height: 24px;
    border: 1px solid #909090;
    border-radius: 6px;
    margin-left: 400px;
    .line {
      position: relative;
      display: block;
      width: 25px;
      height: 0;
      border-top: 1px solid #35b8ae;
      border-bottom: 1px solid #35b8ae;
      margin-right: 8px;
      .circ {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #35b8ae;
      }
    }
    p {
      font-family: 'HarmonyOS Sans SC';
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: #274b6d;
    }
  }
}
</style>
